<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>使用 dataset 管理数据</title>
<script src="js/echarts.js"  th:src="@{/js/echarts4.js}"></script>
<script src="js/jquery-1.8.3.min.js" th:src="@{/js/jquery-1.8.3.min.js}"></script>
</head>
<body>
	 <div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
	//ECharts 4 开始支持
	
		$(function(){
			var myChart = echarts.init(document.getElementById('main'));
			myChart.setOption({
				legend: {},
			    tooltip: {},
			    dataset: {
			        source: [
			            ['product', '2015', '2016', '2017'],
			            ['Matcha Latte', 43.3, 85.8, 93.7],
			            ['Milk Tea', 83.1, 73.4, 55.1],
			            ['Cheese Cocoa', 86.4, 65.2, 82.5],
			            ['Walnut Brownie', 72.4, 53.9, 39.1]
			        ]
			    },
			    xAxis: [{type: 'category'},{type: 'category', gridIndex: 1}],
			    yAxis: [{gridIndex: 0},{gridIndex: 1}],
			    //定位可用于多图表的时候
			    grid: [
			        {x: '7%',y:"10%",width: '38%', height: '38%'},
			        {x: '55%',y:"10%",width: '38%', height: '38%'}
			    ],
			    // Declare several bar series, each will be mapped
			    // to a column of dataset.source by default.
			    series: [
			        {type: 'bar', seriesLayoutBy: 'row'},
			        {type: 'bar', seriesLayoutBy: 'row'},
			        {type: 'bar', seriesLayoutBy: 'row'},
			        {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'line', xAxisIndex: 1, yAxisIndex: 1},
			        {type: 'line', xAxisIndex: 1, yAxisIndex: 1}
			    ]
			})
		})
	</script>
</body>
</html>